<template>
  <div class="tabs-container" :class="moreInfo ? 'moreFn' : ''">
    <div class="btns">
      <el-button type="primary" class="btn" @click="handleOpen('push')" plain>
        {{ translate('重推') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('code')" plain>
        {{ translate('设置编码') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('mode')" plain>
        {{ translate('设置模式') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('screen')" plain>
        {{ translate('横竖切换') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('bindVideo')" plain>
        {{ translate('绑定视频') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('bindImg')" plain>
        {{ translate('绑定图片') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('updateImg')" plain>
        {{ translate('更新背景') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('updateopenImg')" plain>
        {{ translate('开机图片') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('wifi')" plain>
        {{ translate('设置网络') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('reconnect')" plain>
        {{ translate('参数设置') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('server')" plain>
        {{ translate('服务地址') }}
      </el-button>
      <el-button type="primary" class="btn" @click="refreshFn('reboot')" plain>
        {{ translate('重启') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('cache')" plain>
        {{ translate('清除缓存') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('update')" plain>
        {{ translate('程序升级') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('engmode')" plain>
        {{ translate('工程模式') }}
      </el-button>
      <!-- <el-button class="btn" @click="handleOpen('volume')">设置音量</el-button> -->
      <el-button type="primary" class="btn" @click="refreshFn('englog')" plain>
        {{ translate('工程日志') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('power')" plain>
        {{ translate('背光亮度') }}
      </el-button>
      <el-button type="primary" class="btn" @click="refreshFn('device')" plain>
        {{ translate('设备查询') }}
      </el-button>

      <el-button type="primary" class="btn" @click="refreshFn('init')" plain>
        {{ translate('出厂设置') }}
      </el-button>
      <el-button type="primary" class="btn" @click="refreshFn('tkickout')" plain>
        {{ translate('断开链接') }}
      </el-button>
      <el-button type="primary" class="btn" @click="handleOpen('interval')" plain>
        {{ translate('重连间隔') }}
      </el-button>
      <div class="more" @click="moreFn()">
        <span>更多</span>
        <vab-icon icon="arrow-right-s-line" />
      </div>
      <!-- <el-button class="btn">开机图片</el-button> -->
      <!-- <el-button class="btn" @click="refreshStatus('refresh')">
        {{ translate('更新在线状态') }}
      </el-button> -->
    </div>
    <Dialog
      :cslist="props.multipleSelection"
      :dialogtype="dialogType"
      :fields="fields"
      :title="title"
      :visible="dialogVisible"
      @close="handleClose"
      @confirm="handleConfirm"
    />
    <BindImgDialog
      :imgtype="Imgtype"
      :visible="bindImgDialogVisible"
      @close="bindImgDialogVisible = false"
      @confirm="bindImgDialogConfirm"
    />
    <BindVideoDialog
      :visible="bindVideoDialogVisible"
      @close="bindVideoDialogVisible = false"
      @confirm="bindVideoDialogConfirm"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, Ref } from 'vue'
  import Dialog from '../../components/dialog.vue'
  import { formFileds, titleFileds } from './form'
  import BindImgDialog from './bindImageDia.vue'
  import BindVideoDialog from './bindVideoDia.vue'
  import { translate } from '@/i18n'

  const props = defineProps({
    multipleSelection: {
      type: Array as any,
      default() {
        return []
      },
    },
  })
  const dialogVisible = ref(false)
  const handleClose = () => {
    dialogVisible.value = false
  }
  const fields: Ref<any[]> = ref([])
  const title: Ref<string> = ref('')
  const dialogType: Ref<string> = ref('')
  const Imgtype = ref('')
  const handleOpen = (type: string) => {
    if (!props.multipleSelection || props.multipleSelection.length === 0) {
      ElMessage({
        message: translate('请选择彩屏'),
        type: 'warning',
      })
      return
    }
    dialogType.value = type
    // 推送
    if (type === 'push') {
      formFileds['push'][0].model = props.multipleSelection
        .map((item: any) => item.ID)
        .join(',')
      formFileds['push'][0].textArr = props.multipleSelection.map(
        (item: any) => item.CSName
      )
    }
    // 绑定图片
    if (type === 'bindImg' || type === 'updateImg') {
      Imgtype.value = type
      bindImgDialogVisible.value = true
      return
    }
    // 更新开机LOGO图片
    if (type === 'bindImg' || type === 'updateopenImg') {
      Imgtype.value = type
      bindImgDialogVisible.value = true
      return
    }
    if (type === 'bindVideo') {
      bindVideoDialogVisible.value = true
      return
    }
    if (type === 'server') {
      formFileds['server'].map((item: any) => {
        console.log(item.field)
        if (item.field === 'mqtt_server') {
          item.model = props.multipleSelection[0].mqtt_server
        } else if (item.field === 'mqtt_port') {
          item.model = props.multipleSelection[0].mqtt_port
        } else if (item.field === 'mqtt_user_name') {
          item.model = props.multipleSelection[0].mqtt_user_name
        } else if (item.field === 'mqtt_user_pass') {
          item.model = props.multipleSelection[0].mqtt_user_pass
        }
      })
    }
    fields.value = formFileds[type]
    title.value = titleFileds[type]
    console.log(fields.value)
    dialogVisible.value = true
  }
  const emit = defineEmits(['confirm'])
  const handleConfirm = (result: any) => {
    console.log(dialogType.value)
    dialogVisible.value = false
    emit('confirm', result, dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
  //  绑定图片
  const bindImgDialogVisible = ref(false)
  const bindImgDialogConfirm = (result: any) => {
    bindImgDialogVisible.value = false
    emit('confirm', result, dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
  const moreInfo = ref(false)
  const moreFn = () =>{
    moreInfo.value = !moreInfo.value
  }
  // 绑定视频
  const bindVideoDialogVisible = ref(false)
  const bindVideoDialogConfirm = (result: any) => {
    bindVideoDialogVisible.value = false
    emit('confirm', result, dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
  // 刷新在线状态
  const refreshStatus = (type: string) => {
    dialogType.value = type
    emit('confirm', [], dialogType.value, props.multipleSelection)
    dialogType.value = ''
  }
  // 设备批量信息查询
  const refreshFn = (type: string) => {
    if (!props.multipleSelection || props.multipleSelection.length === 0) {
      ElMessage({
        message: translate('请选择彩屏'),
        type: 'warning',
      })
      return
    }
    if (type === 'tkickout') {
      ElMessageBox.confirm(translate('确认剔除客户端吗?'), translate('提示'), {
        confirmButtonText: translate('确定'),
        cancelButtonText: translate('取消'),
        type: 'warning',
      })
        .then(() => {
          dialogType.value = type
          emit('confirm', [], dialogType.value, props.multipleSelection)
          dialogType.value = ''
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: translate('已取消剔除'),
          })
        })
    } else {
      dialogType.value = type
      emit('confirm', [], dialogType.value, props.multipleSelection)
      dialogType.value = ''
    }
  }
</script>

<style lang="scss" scoped>
  .tabs-container {
    width:1180px;
    border-bottom: 1px solid #eee;
    height: 40px;
    overflow: hidden;
    .btns {
      position: relative;
       padding: 0px 12px;
       display: math;
      .btn {
        margin-bottom: 8px;
      }
      .more {
        position: absolute;
        top: -4px;
        right: -127%;
      }
    }
  }
  .moreFn {
    height: 100%;
  }
</style>
